@theme inline {
  --color-red: var(--color-red-light);
  --color-orange: var(--color-orange-light);
  --color-yellow: var(--color-yellow-light);
  --color-green: var(--color-green-light);
  --color-mint: var(--color-mint-light);
  --color-teal: var(--color-teal-light);
  --color-cyan: var(--color-cyan-light);
  --color-blue: var(--color-blue-light);
  --color-indigo: var(--color-indigo-light);
  --color-purple: var(--color-purple-light);
  --color-pink: var(--color-pink-light);
  --color-brown: var(--color-brown-light);

  --color-disabled: var(--color-disabled-light);

  --color-gray: var(--color-gray-light);
  --color-gary2: var(--color-gray2-light);
  --color-gary3: var(--color-gray3-light);
  --color-gary4: var(--color-gray4-light);
  --color-gary5: var(--color-gray5-light);
  --color-gary6: var(--color-gray6-light);

  --color-red-vibrant: var(--color-red-vibrant-light);
  --color-orange-vibrant: var(--color-orange-vibrant-light);
  --color-yellow-vibrant: var(--color-yellow-vibrant-light);
  --color-green-vibrant: var(--color-green-vibrant-light);
  --color-mint-vibrant: var(--color-mint-vibrant-light);
  --color-teal-vibrant: var(--color-teal-vibrant-light);
  --color-cyan-vibrant: var(--color-cyan-vibrant-light);
  --color-blue-vibrant: var(--color-blue-vibrant-light);
  --color-indigo-vibrant: var(--color-indigo-vibrant-light);
  --color-purple-vibrant: var(--color-purple-vibrant-light);
  --color-pink-vibrant: var(--color-pink-vibrant-light);
  --color-brown-vibrant: var(--color-brown-vibrant-light);
  --color-gray-vibrant: var(--color-gray-vibrant-light);

  --color-separator: var(--color-separator-light);

  --text-color-primary: var(--text-color-primary-light);
  --text-color-secondary: var(--text-color-secondary-light);
  --text-color-tertiary: var(--text-color-tertiary-light);
  --text-color-quaternary: var(--text-color-quaternary-light);

  --background-color-primary: var(--background-color-primary-light);
  --background-color-secondary: var(--background-color-secondary-light);
  --background-color-tertiary: var(--background-color-tertiary-light);

  --background-color-primary-grouped: var(
    --background-color-primary-grouped-light
  );
  --background-color-secondary-grouped: var(
    --background-color-secondary-grouped-light
  );
  --background-color-tertiary-grouped: var(
    --background-color-tertiary-grouped-light
  );

  --background-color-primary-fill: var(--background-color-primary-fill-light);
  --background-color-secondary-fill: var(
    --background-color-secondary-fill-light
  );
  --background-color-tertiary-fill: var(--background-color-tertiary-fill-light);
  --background-color-quaternary-fill: var(
    --background-color-quaternary-fill-light
  );
}

@theme {
  --color-red-light: #ff3b30;
  --color-orange-light: #ff9500;
  --color-yellow-light: #ffcc00;
  --color-green-light: #34c759;
  --color-mint-light: #00c7be;
  --color-teal-light: #30b0c7;
  --color-cyan-light: #32ade6;
  --color-blue-light: #007aff;
  --color-indigo-light: #5856d6;
  --color-purple-light: #af52de;
  --color-pink-light: #ff2d55;
  --color-brown-light: #a2845e;

  --color-gray-light: #8e8e93;
  --color-gray2-light: #aeaeb2;
  --color-gray3-light: #c7c7cc;
  --color-gray4-light: #d1d1d6;
  --color-gray5-light: #e5e5ea;
  --color-gray6-light: #f2f2f7;

  --color-red-dark: #ff453a;
  --color-orange-dark: #ff9f0a;
  --color-yellow-dark: #ffd60a;
  --color-green-dark: #30d158;
  --color-mint-dark: #63e6e2;
  --color-teal-dark: #40cbe0;
  --color-cyan-dark: #64d2ff;
  --color-blue-dark: #0a84ff;
  --color-indigo-dark: #5e5ce6;
  --color-purple-dark: #bf5af2;
  --color-pink-dark: #ff375f;
  --color-brown-dark: #ac8e68;
  --color-gray2-dark: #636366;
  --color-gray3-dark: #48484a;
  --color-gray4-dark: #3a3a3c;
  --color-gray5-dark: #2c2c2e;
  --color-gray6-dark: #1c1c1e;

  --color-black: #000000;
  --color-white: #ffffff;

  /* 来自macOS */
  --color-red-vibrant-light: #f53126;
  --color-orange-vibrant-light: #f58b00;
  --color-yellow-vibrant-light: #f5c200;
  --color-green-vibrant-light: #1ec337;
  --color-mint-vibrant-light: #00bdb4;
  --color-teal-vibrant-light: #2ea7bd;
  --color-cyan-vibrant-light: #41afdc;
  --color-blue-vibrant-light: #0070f5;
  --color-indigo-vibrant-light: #5452cc;
  --color-purple-vibrant-light: #9f4bc9;
  --color-pink-vibrant-light: #f5234b;
  --color-brown-vibrant-light: #987a54;
  --color-gray-vibrant-light: #848489;

  --color-red-vibrant-dark: #ff4f44;
  --color-orange-vibrant-dark: #ffa914;
  --color-yellow-vibrant-dark: #ffe014;
  --color-green-vibrant-dark: #3ce155;
  --color-mint-vibrant-dark: #6ce0db;
  --color-teal-vibrant-dark: #44d4fa;
  --color-cyan-vibrant-dark: #5acdfa;
  --color-blue-vibrant-dark: #148eff;
  --color-indigo-vibrant-dark: #6361f2;
  --color-purple-vibrant-dark: #cc65ff;
  --color-pink-vibrant-dark: #ff4169;
  --color-brown-vibrant-dark: #b69872;
  --color-gray-vibrant-dark: #a2a2a7;
}

@theme {
  --color-disabled-light: rgba(60, 60, 67, 0.18);
  --color-disabled-dark: rgba(235, 235, 245, 0.18);
}

@theme {
  --color-separator-light: #c6c6c8;
  --color-separator-dark: #38383a;
}

@theme {
  --outline-color-blackfill-gary: #4d4d4d;
  --outline-color-whitefill-gary: #bfbfbf;
  --outline-color-whitefill-black: #000000;
}

@theme {
  --text-color-primary-light: #000000;
  --text-color-secondary-light: rgba(60, 60, 67, 0.6);
  --text-color-tertiary-light: rgba(60, 60, 67, 0.3);
  --text-color-quaternary-light: rgba(60, 60, 67, 0.18);

  --text-color-primary-dark: #ffffff;
  --text-color-secondary-dark: rgba(235, 235, 245, 0.6);
  --text-color-tertiary-dark: rgba(235, 235, 245, 0.3);
  --text-color-quaternary-dark: rgba(235, 235, 245, 0.18);
}

@theme {
  --background-color-primary-light: #ffffff;
  --background-color-secondary-light: #f2f2f7;
  --background-color-tertiary-light: #ffffff;

  --background-color-primary-dark: #000000;
  --background-color-secondary-dark: #1c1c1e;
  --background-color-tertiary-dark: #2c2c2e;

  --background-color-primary-dark-elevated: #1c1c1e;
  --background-color-secondary-dark-elevated: #2c2c2e;
  --background-color-tertiary-dark-elevated: #3a3a3c;

  --background-color-primary-grouped-light: #f2f2f7;
  --background-color-secondary-grouped-light: #ffffff;
  --background-color-tertiary-grouped-light: #f2f2f7;

  --background-color-primary-grouped-dark: #000000;
  --background-color-secondary-grouped-dark: #1c1c1e;
  --background-color-tertiary-grouped-dark: #2c2c2e;

  --background-color-primary-grouped-dark-elevated: #1c1c1e;
  --background-color-secondary-grouped-dark-elevated: #2c2c2e;
  --background-color-tertiary-grouped-dark-elevated: #3a3a3c;

  --background-color-primary-fill-light: rgba(120, 120, 128, 0.2);
  --background-color-secondary-fill-light: rgba(120, 120, 128, 0.16);
  --background-color-tertiary-fill-light: rgba(118, 118, 128, 0.12);
  --background-color-quaternary-fill-light: rgba(116, 116, 128, 0.08);

  --background-color-primary-fill-dark: rgba(120, 120, 128, 0.36);
  --background-color-secondary-fill-dark: rgba(120, 120, 128, 0.32);
  --background-color-tertiary-fill-dark: rgba(118, 118, 128, 0.24);
  --background-color-quaternary-fill-dark: rgba(116, 116, 128, 0.18);
}

@theme {
  /* 来自macOS */
  --background-image-service-blue: linear-gradient(
    180deg,
    #0fb7fa 0%,
    #0072fb 100%
  );
  --background-image-service-cyan: linear-gradient(
    180deg,
    #6fdcfc 0%,
    #55bef0 100%
  );
  --background-image-service-darkgray: linear-gradient(
    180deg,
    #818181 0%,
    #4a4a4a 100%
  );
  --background-image-service-gray: linear-gradient(
    180deg,
    #bfbfbf 0%,
    #919191 100%
  );
  --background-image-service-green: linear-gradient(
    180deg,
    #35e461 0%,
    #34c734 100%
  );
  --background-image-service-pink: linear-gradient(
    180deg,
    #fb4982 0%,
    #f5234b 100%
  );
  --background-image-service-purple: linear-gradient(
    180deg,
    #9d82ff 0%,
    #5856d6 100%
  );
  --background-image-service-red: linear-gradient(
    180deg,
    #ff6969 0%,
    #ff3b30 100%
  );
  --background-image-service-white: linear-gradient(
    180deg,
    #ffffff 0%,
    #f0f0f0 100%
  );
}
